<script setup>
	import {
		computed,
		ref
	} from 'vue';

	computed
	const firstName = ref("ABC")
	const lastName = ref("EF")

	// const fullName = computed(() => {
	// 	console.log("计算属性");
	// 	return firstName.value + "-" + lastName.value
	// })


	const fullName = function() {
		console.log("方法");
		return firstName.value + "-" + lastName.value
	}
</script>
<template>
	<view class=" out ">
		<input type="text" v-model="firstName" placeholder="请输入名..." />
		<input type="text" v-model="lastName" placeholder="请输入姓..." />
		<!-- <view>全称：{{firstName + "-" + lastName}}</view> -->
		<!-- 		<view>全称：{{fullName}}</view>
		<view>全称：{{fullName}}</view>
		<view>全称：{{fullName}}</view> -->
		<view>全称：{{fullName()}}</view>
		<view>全称：{{fullName()}}</view>
		<view>全称：{{fullName()}}</view>
	</view>

</template>
<style lang="scss" scoped>
	.out {
		padding: 0 20px;
		margin-top: 40px;
		position: relative; //相对定位

		input {
			border: 1px solid #000000;
			height: 40px;
			background-color: white;
			position: relative;
			z-index: 2; //层级为2，高
			padding: 0 10px;
			margin-top: 10px;
		}
	}
</style>